<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 100%;
            border: 1px solid #ccc;
            border-collapse: collapse;
            border-spacing: 0px;
        }

        table td {
            border: 1px solid #ccc;
            height: 30px;
        }
    </style>
</head>

<body>
    2.可编辑表格
    <span>姓名</span>
    <input type="text" name="" id="" class="i1">
    <span>年龄</span>
    <input type="text" name="" id="" class="i2">
    <span>电话</span>
    <input type="text" name="" id="" class="i3">
    <span>QQ号</span>
    <input type="text" name="" id="" class="i4">
    <button class="b1">保存</button>
    <div class="d1"></div>

    <script src="../js/1.js"></script>
    <script>

        let b1 = document.querySelector(".b1");
        let d1 = document.querySelector(".d1");
        let t1 = document.createElement('table');
        let t2 = document.createElement('tbody');

        let xuanran = () => {
            let pand1 = d1.hasChildNodes();
            // console.log(pand1)
            if (pand1) {
                neirong()
            } else {

                let tr = document.createElement("tr");
                t1.appendChild(t2);
                let i = ["姓名", "年龄", "电话", "QQ号", "操作"];
                i.forEach((items, index) => {
                    let td = document.createElement("td");
                    let nei = document.createTextNode(items);
                    td.appendChild(nei)
                    tr.appendChild(td)
                })
                t1.appendChild(tr)
                d1.appendChild(t1)
                neirong()
            }
        }

        let neirong = () => {
            let i1 = document.querySelector(".i1");
            let i2 = document.querySelector(".i2");
            let i3 = document.querySelector(".i3");
            let i4 = document.querySelector(".i4");
            let tr = document.createElement("tr");
            // let ii1 = i1.value;
            // let ii2 = i2.value;
            // let ii3 = i3.value;
            // let ii4 = i4.value;
            let zong = [i1.value, i2.value, i3.value, i4.value, ""]
            for (let i = 0; i < 5; i++) {
                let td = document.createElement("td");
                let nei = document.createTextNode(zong[i]);
                if (i == 4) {
                    td.innerHTML = `<a href="#" class="del">删除</a>`
                }

                td.appendChild(nei)
                tr.appendChild(td)
            }
            t1.appendChild(tr)
            dd()
            d1.appendChild(t1)
            i1.value = "";
            i2.value = "";
            i3.value = "";
            i4.value = "";
        }

        let dfn = t1.getElementsByClassName("del");
        function dd() {
            let tr = t1.getElementsByTagName("tr");
            for (let i = 0; i < dfn.length; i++) {
                dfn[i].onclick = function () {
                    t1.removeChild(this.parentNode.parentNode);
                }
            }
        }





        shijian(b1, "click", xuanran)

    </script>
</body>

</html>